<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .header{
            background-color: #06b6ef;
            height: 100px;
        }
        .bt1{
            line-height: 70px;
            margin-top: 10px;
            width: 500px;
            font-size: 30px;
            /*height: 200px;*/
        }
        .mod{
            /*background-color: orange;*/
            text-align: center;
            line-height: 40px;
            font-size: 30px;
            margin-top: 5px;
            padding: 10px;


        }
        .dxck{
            padding: 10px;
            width: 300px;
            color: ghostwhite;
        }
        .sc{
            line-height: 100%   ;
            height: 30px;
            width: 100px;
            margin-left: 100px;
        }
        .hide{
            display: none;
        }
        #show_msg{
            height: 350px;
            background-color: pink;
            position: fixed;
        }
        .xbnr{
            line-height: 100px;
            font-size: 80px;
        }
        input{
            font-size: 80px;
        }
        .close1{
            margin-left: 900px;
            font-size: 25px;

        }
        body{
            height: 1500px;
            background-color: black;
        }
    </style>
</head>
<body>
<div class="header" id="header">
    <button class="bt1">增加个人信息</button>
</div>
<div class="mod" id="mod">
<table border="1">
    <tbody class="msg1" id="msg1">
    <tr>
        <th class="dxck">姓名</th>
        <th class="dxck">年龄</th>
        <th class="dxck">专业</th>
        <th class="dxck"></th>
    </tr>
    <tr>
        <td class="dxck">王</td>
        <td class="dxck">18</td>
        <td class="dxck">计算机</td>
        <td class="dxck"><button class="sc" onclick="delnode(this)">删除</button></td>
    </tr>
    <tr>
        <td class="dxck">王2</td>
        <td class="dxck">181</td>
        <td class="dxck">计算机1</td>
        <td class="dxck"><button class="sc" onclick="delnode(this)">删除</button></td>
    </tr>
    </tbody>
</table>
</div>
<div class="show_msg hide" id="show_msg">
    <span class="xbnr">姓名:</span><input id="name" type="text" title="请输入姓名" placeholder="请输入姓名" ><br>
    <span class="xbnr">年龄:</span><input id="age" type="text" title="请输入age" placeholder="请输入age"><br>
    <span class="xbnr">专业:</span><input id="hobby" type="text" title="请输入专业" placeholder="请输入专业" ><br>
    <button class="close1" id="close1">保存</button>
</div>
</body>
    <script>

                    var bt1 =document.getElementsByClassName("bt1")[0];  //加入信息按钮
                    var show_msg =document.getElementById("show_msg"); //加入内容界面
                    var close1 =document.getElementById("close1");  //关闭加入内容界面
                    var name =document.getElementById("name");  //名字
                    var age =document.getElementById("age");  //年龄
                    var hobby =document.getElementById("hobby"); //专业
                    var msg1  =document.getElementById("msg1") ;//获取展示内容父标签
            bt1.onclick =function () {
                show_msg.classList.remove("hide")
            };
            close1.onclick =function () {
              show_msg.classList.add("hide");
                namemsg= name.value;
                agemsg =age.value;
                hobbymsg =hobby.value;
            var creatbody =document.createElement("tr");  //创建tr
            var creatname =document.createElement("td");  //创建td
            creatname.setAttribute("class","dxck");    //赋值css
            creatname.innerHTML=namemsg;   //给td 赋name value
            var creatage =document.createElement("td");   //创建td
            creatage.setAttribute("class","dxck");
            creatage.innerHTML=agemsg;    //赋值
            var creathobby =document.createElement("td");  //创建td
            creathobby.setAttribute("class","dxck");
            creathobby.innerHTML=hobbymsg;
            var creatclear =document.createElement("td");  //创建td
            creatclear.setAttribute("class","dxck");
            // creatclear.innerHTML="<button class=\"sc\" onclick=\"delnode(this)\">删除</button>"
            var iupdel =document.createElement("button");  //创建button
            iupdel.setAttribute("class","sc");
            iupdel.setAttribute("onclick","delnode(this)");
            iupdel.innerHTML="删除";

            msg1.appendChild(creatbody);     //在msg1 下增加tr标签
            creatbody.appendChild(creatname); //在tr 标签下增加td
            creatbody.appendChild(creatage);   //
            creatbody.appendChild(creathobby);  //
            creatbody.appendChild(creatclear); //
            creatclear.appendChild(iupdel); //在td 标签内增加button
            };
 //             var scmsg =document.getElementsByClassName("sc");     ///待解决
 //             for(var i=0;i>scmsg.length;i++){
 //
 //             scmsg[i].onclick =function () {
 //                     alert("zhans")
 //                 }
 // }
            function delnode(inputNode) {
                var trNode = inputNode.parentNode.parentNode;
                var tbody =document.getElementsByTagName("tbody")[0];
                tbody.removeChild(trNode)
            }


    </script>
</html>